<!-- 课程表 -->
<template>
	<view class="class">
		<u-table>
			<u-tr ref="tr1">
				<u-th v-for="(item,index) in top" :key="index">{{item.title}}</u-th>
			</u-tr>
			<u-tr v-for="(item,index) in list" :key="index">
				<u-td class="td" :class="td.topzIndex?'topzIndex':''" :style="'height: '+contentTdHeight+'px;z-index:'+td.zIdx(index)" v-for="(td,index2) in item.list" :key="index2">
					{{td.title}}
					<block v-for="(classItem,index3) in item.classList" :key="index3">
						<scroll-view :scroll-y="true" class="classList acea-row row-middle" @click="tdHandle(classItem)" :style="'top:'+classItem.topMove+'px;height: '+(contentTdHeight*classItem.classTime)+'px;background-color:'+td.bgColor" v-if="classItem.week == td.week">
							<text class="title">{{classItem.title}}</text> 
						</scroll-view>
					</block>
				</u-td>
			</u-tr>
		</u-table>
		<u-popup v-model="show" mode="bottom" border-radius="28" height="190px">
			<view class="pop acea-row row-column">
				<view class="item acea-row row-middle" style="font-size: 28rpx;margin-bottom: 24rpx;">
					<text style="color:#8F959E">课程：</text>
					<text style="margin-left: 24rpx;">{{classInfo.title}}</text>
				</view>
				<view class="item acea-row row-middle" style="font-size: 28rpx;margin-bottom: 24rpx;">
					<text style="color:#8F959E">班级：</text>
					<text style="margin-left: 24rpx;">{{classInfo.banji}}</text>
				</view>
				<view class="item acea-row row-middle" style="font-size: 28rpx;margin-bottom: 24rpx;">
					<text style="color:#8F959E">日期：</text>
					<text style="margin-left: 24rpx;">{{classInfo.start_date}} {{classInfo.timefrom}}-{{classInfo.timeto}} ({{classInfo.weekTitle}})</text>
				</view>
				<view class="item acea-row row-middle" style="font-size: 28rpx;margin-bottom: 24rpx;">
					<text style="color:#8F959E">班级人数：</text>
					<text style="margin-left: 24rpx;">{{classInfo.person_num}}</text>
				</view>
			</view>
		</u-popup>
		<u-picker v-model="show2" mode="selector" :range="zhou" range-key="title" :default-selector="[zhou.findIndex(e=>e.isCheck)]" @confirm="pickerConfirm"></u-picker>
		<u-navbar
		ref="navbar"
		back-icon-color="#1F2329" 
		:back-text-style="{ color: '#1F2329' }" 
		back-text=" " 
		:background="{backgroundColor: '#ffffff'}">
			<view class="slot-navbar acea-row row-center" @click="navbarHandle">
				{{navInfo}}<u-icon name="arrow-down" color="#1F2329" size="28" class="icon"></u-icon>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	const data = []
	const top = [
		{id:0,title:"/"},
		{id:1,title:"周一"},
		{id:2,title:"周二"},
		{id:3,title:"周三"},
		{id:4,title:"周四"},
		{id:5,title:"周五"},
		{id:6,title:"周六"},
		{id:7,title:"周日"},
	]
	const left = [1,2,3,4,5,6,7,8,9,10]
	const classList = [
		{
			start:1, // 开始时间
			end:3, // 结束时间
			classTime:3, // 课时
			week:1, // 周一
			title:"线性代数@高数楼501"
		},
		{start:5,end:6,classTime:2,week:1,title:"数据结构与算法@软件楼301"},
		{start:7,end:8,classTime:2,week:2,title:"计算机网络@软件楼301"},
		{start:2,end:3,classTime:2,week:3,title:"英语@语言楼101"},
		{start:5,end:8,classTime:4,week:4,title:"高数@高数楼501"},
		{start:1,end:2,classTime:2,week:5,title:"数据结构与算法@软件楼301"},
		{start:3,end:4,classTime:2,week:5,title:"汇编语言@软件楼301"},
	]
	const bgColorList = ["#228B22","#007AFF","#FF8C00","#e13eaa","#DAA520"]
	import common from '../../api/common.js'
	import request from '../../api/request.js'
	import moment from '../../utils/moment.js'
	export default{
		data(){
			return{
				list:[],
				top,
				left:[],
				classList:[],
				contentTdHeight:100,
				show:false,
				show2:false,
				classInfo:{},
				navInfo:"本周",
				zhou:common.getDate().getZhou(),
				navbarHeight:0,
				classPop:{}
			}
		},
		created() {
			this.getData()
		},
		mounted() {
			//废弃，不计算高度，使用固定值
			// this.getTdHeight()
		},
		methods:{
			init(){
				let list = [];
				for(let i of this.left){
					let f = this.classList.filter(e=>e.start == i.value)
					let o = {
						list:[],	
						classList:[]
					};
					for(let t of top){
						let f2 = f.filter(e=>e.week == t.id)
						if(t.title === "/"){
							o.list.push({title:i.title,week:t.id,topzIndex:f2.length>0?true:false,bgColor:this.getBgColor(i.value,t.id),zIdx:(idx)=>f2.length>0?200-idx:1})
						}else{
							o.list.push({title:"",week:t.id,topzIndex:f2.length>0?true:false,bgColor:this.getBgColor(i.value,t.id),zIdx:(idx)=>f2.length>0?200-idx:1})
						}
						o.classList = o.classList.concat(f2)
					}
					list.push(o)
				}
				// console.log("list",list)
				this.list = list
			},
			getData(){
				let res = this.zhou.find(e=>e.isCheck)
				let data = {
					page:1,
					limit:100,
					start_date:res.start,
					jieshu_date:res.end,
					is_take:0,
				}
				request.go((e)=>{
					let startTime=9,  //默认开始时间
						endTime=17,  //默认结束时间
						left=[];
					for(let i of e.data){
						// 获取开始和结束时间，小时为单位
						i.start = i.timefrom.split(":")[0]
						i.end = i.timeto.split(":")[0]
						i.startMinute = i.timefrom.split(":")[1]
						// i.classTime = i.end - i.start //不在计算classTime,直接用固定值生成高度
						i.classTime = 1
						startTime = parseInt(startTime <= i.timefrom.split(":")[0]?startTime:i.timefrom.split(":")[0])
						endTime = parseInt(endTime >= i.timeto.split(":")[0]?endTime:i.timeto.split(":")[0])
						//获取星期
						i.week = parseInt(moment(i.start_date).format('e')) + 1
						i.weekTitle = this.getWeekTitle(i.week)
						//配置标题
						i.title = `${i.kecheng}@${i.banji}\n${i.person_num}人${i.timefrom}\n|\n${i.timeto}`
						// 根据分钟计算顶部偏移
						i.topMove = Math.floor(i.startMinute/60*this.contentTdHeight) 
					}
					// console.log(startTime,endTime)
					// 根据startTime和endTime生成纵轴数据
					for(let i=startTime;i<=endTime;i++){
						let obj = {
							value:i,
							title:i+'点'
						}
						left.push(obj)
					}
					this.left = left
					this.classList = e.data
					// console.log(left,e.data)
					this.init()
					uni.stopPullDownRefresh()
				},'/Banji/takeName',data,'POST')
			},
			getTdHeight(){
				let navbarHeight = this.$refs.navbar.navbarHeight
				let trHeight = 30
				let contentTdHeight = 0
				uni.getSystemInfo({
					success(res) {
						let windowHeight = res.windowHeight
						let statusBarHeight = res.statusBarHeight
						contentTdHeight = (windowHeight - navbarHeight - trHeight - statusBarHeight)/left.length
					}
				})
				this.contentTdHeight = contentTdHeight
				this.navbarHeight = navbarHeight
			},
			tdHandle(item){ 
				this.classInfo = item
				this.show = true
				// console.log(item)
			},
			navbarHandle(){
				this.show2 = true
			},
			pickerConfirm(e){
				let idx = e[0]
				this.navInfo = this.zhou[idx].title
				for(let i of this.zhou){
					i.isCheck = false
				}
				this.zhou[idx].isCheck = true
				this.getData()
			},
			getBgColor(leftId,topId){
				// let l = leftId<=5?leftId-1:leftId-5-1
				// let t = topId<=5?topId-1:topId-5-1
				let l = leftId
				let t = topId
				let idx = parseInt(t+l)
				idx = idx > 5?idx%5:idx
				return bgColorList[idx]
			},
			getWeekTitle(week){
				let w = ['周一','周二','周三','周四','周五','周六','周日']
				return w[week-1]
			}
		}
	}
</script>

<style scoped>
	.class >>> .u-navbar-placeholder{
		height: 0 !important;
	}
	.slot-navbar{
		width: 100%;
		color: #1F2329;
		font-size: 32rpx;
		margin-left: 60px;
		font-weight: bold;
	}
	.slot-navbar .icon{
		margin-left: 5rpx;
		margin-top: 2rpx;
	}
	.td{
		position: relative;
	}
	.topzIndex{
		/* z-index: 888; */
	}
	.classList{
		width: 90%;
		box-sizing: border-box;
		padding: 10rpx 10rpx;
		position: absolute;
		top: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10rpx;
		opacity: 0.8;
		color: #FFFFFF;
	}
	.classList .title{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 10;
		overflow: hidden;
	}
	.pop{
		padding: 40rpx;
		box-sizing: border-box;
	}
	.pop .item{
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}
	.pop .item:last-of-type{
		margin-bottom: 0;
	}
</style>
